<template>
  <div class="child">
      <h2>子组件2</h2>
      <h3>电脑：{{ computer }}</h3>
      <h3 v-if="toy">我收到了玩具：{{ toy }}</h3>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import emitter from '@/utils/emitter'
const computer = ref('联想')
const toy = ref('')

// 注意mitt的类型定义：
// receivedToy: any 或者 receivedToy: unknown 均可
emitter.on('get-toy', (receivedToy: any) => {
  toy.value = receivedToy
})

// 在组件卸载时，解绑事件
onUnmounted(() => {
  emitter.off('get-toy')
})
</script>

<style scoped>
.child {
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background-color: skyblue;
  border-radius: 10px;
}
</style>